<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>.: Scotiabank | Tarjetas :.</title>
        
        <!--CSS Files-->
		<link rel="stylesheet" href="css/960_50col.css" type="text/css" media="all">
        <link rel="stylesheet" href="css/tabs_css_jtools.css" type="text/css" media="all">
        <link rel="stylesheet" href="css/styles.css" type="text/css" media="all">
        <link rel="stylesheet" href="css/tarjetas.css" type="text/css" media="all">
        
        <!--Javascript Files-->
		<script language="JavaScript" type="text/javascript" src="https://apps.scotiabank.com/inc/omnitureperu.js"></script>
		<script type="text/javascript" src="js/jquery-1.8.1.min.js"></script>
        <script type="text/javascript" src="js/jquery.localscroll-1.2.7-min.js"></script>
        <script type="text/javascript" src="js/jquery.scrollTo-1.4.2-min.js"></script>        
		<script type="text/javascript" src="js/jquery.tools.min.js"></script>
		<script type="text/javascript" src="js/funciones.js"></script>
        <script type="text/javascript">
			$(document).ready(function()
			{				
				//home page
				$(".slidetabs").tabs(".images > div", {
	
					// enable "cross-fading" effect
					effect : 'fade',
					fadeOutSpeed : "slow",
	
					// start from the beginning after the last tab
					rotate : true,
					autoplay : true
	
						// use the slideshow plugin. It accepts its own configuration
				}).slideshow({autoplay: true, interval: 5000, clickable: false});
				
				$(".slidetabs1").tabs(".images > div", {

					// enable "cross-fading" effect
					effect : 'fade',
					fadeOutSpeed : "slow",

					// start from the beginning after the last tab
					rotate : true,
					autoplay : true

					// use the slideshow plugin. It accepts its own configuration
				}).slideshow({autoplay: true, interval: 5000, clickable: false});
				
				//navigation
				$("#top-menu > li ").addClass("level1");
				$("#top-menu  > li > ul > li ").addClass("level2");
				$("#top-menu  > li > ul > li > ul > li ").addClass("level3");
				$("#top-menu  > li > ul > li > ul > li > ul > li").addClass("level4");
	
				$("#top-menu .level1").hover(function() {
					$(this).find(".level2").stop(false,true).slideToggle(300);
				});
				
				//tarjetas
				$(".tarjeta").hover(function()
					{
						clearInterval(timer);
						$(".tarjeta").find("img:first").stop(true, false).animate({top:"50px"},500,function(){
						$(this).parent().parent().css({overflow:"hidden"});
						$(this).parent().parent().find(".cont").stop(false,true).slideUp();
						});
											
						$(this).find("img:first").stop(true, false).animate({top:"0"},500,function(){
									$(this).parent().parent().css({overflow:"visible"});
									$(this).parent().parent().find(".cont").stop(false,true).slideDown();
							});						
					}, function()
					{
						$(this).find("img:first").stop(true, false).animate({top:"50px"},500,function(){
									$(this).parent().parent().css({overflow:"hidden"});
									$(this).parent().parent().find(".cont").stop(false,true).slideUp();
							});						
					
				});
				//cargar parallax
				$("#parallax_tarjetas").load("tarjetas.html");

				generarSecuencia();
				var timer = setInterval(function(){cambiarTarjeta()}, 3000);			
			});
			
			var indice = 0;
			var orden = new Array();
			
			//
			function cambiarTarjeta()
			{
				var _tarjeta = $(".tarjeta").eq(orden[indice]);				
				$(".tarjeta").find("img:first").stop(true, false).animate({top:"50px"},500,function(){
				$(this).parent().parent().css({overflow:"hidden"});
				$(this).parent().parent().find(".cont").stop(false,true).slideUp();
				});
				
				_tarjeta.find("img:first").animate({top:"0"},500,function(){
				$(this).parent().parent().css({overflow:"visible"});
				$(this).parent().parent().find(".cont").slideDown();
				});	
				
				indice++;
				if(indice > 4)
				{
					generarSecuencia();
					indice = 0;
				}
			}
			
			//
			function generarSecuencia()
			{
				orden[0] = Math.round(Math.random() * 4);
				while(orden[0] == orden[4])
				{
					orden[0] = Math.round(Math.random() * 4);
				}
				for(var i = 0; i < 5; i++)
				{
					orden[i] = -1;
				}
				for(var i = 0; i < 5; i++)
				{
					while(orden[i] < 0)
					{
						orden[i] = Math.round(Math.random() * 4);
						for(var j = 0; j < i; j++)
						{
							if(orden[i] == orden[j])
								orden[i] = -1;
						}
					}
				}				
			}
		</script>
        
        <script type="text/javascript">
			//seleccion de tarjeta
			function mostrar(i)
			{
				var winWidth = $(window).width();
				$("#contenido").hide();
				$("#footer").hide();
				$("#parallax_tarjetas").fadeIn();
				switch(i)
				{
					case 0:
						$('ul.main').css({left:0});
						$('ul.photos').css({left:0});
						break;					
					case 1:
						$('ul.main').css({left:winWidth * -1});
						$('ul.photos').css({left:winWidth * -1});
						break;
					case 2:
						$('ul.main').css({left:winWidth * -2});
						$('ul.photos').css({left:winWidth * -2});
						break;
					case 3:
						$('ul.main').css({left:winWidth * -3});
						$('ul.photos').css({left:winWidth * -3});
						break;
					default:
						break;	
				}
			}
		</script>
        
        <script type="text/javascript">
			$(document).ready(function() {
                if (/MSIE (\d+\.\d+);/.test(navigator.userAgent)) {
			 		var ieversion=new Number(RegExp.$1)
					if (ieversion<=7) {
						document.write('<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">')
						document.write('<html>')
						document.write('<head>')
						document.write('<meta http-equiv="Content-Type" content="text/html; charset=utf-8">')
						document.write('<title>.: Scotiabank | Tarjetas :.</title>')
						document.write('</head>')
						document.write('<body style="text-align:center; width:100%;">')
						document.write('<img align="center" src="img/scotiabank_logo.png">')
						document.write('<p style="width:400px; font-family:Calibri; color:#666;" align="center"><b>Estas usando Internet Explorer 7 o una versión más antigua, para poder ver correctamente el contenido de esta página actualiza tu navegador.')
						document.write('Te recomendamos usar <a target="_blank" href="http://windows.microsoft.com/es-ES/internet-explorer/products/ie/home"> Internet Explorer 9 </a>, <a target="_blank" href="http://www.mozilla.org/es-ES/firefox/fx/"> Firefox </a> o <a target="_blank" href="https://www.google.com/intl/es/chrome/browser/?hl=es"> Chrome</a></b></p>');
						document.write('</body>')
						document.write('</html>')
					}
				}
            });			
		</script>
    </head>
    
    <body>
    	<div class="container_50">
        	<div id="header" class="grid_50">

				<div class="grid_20 alpha">
					<a id="logo" href="#"><img alt="Scotiabank | Premium" border="0" src="img/scotiabank_logo.png"></a>
				</div>

				<div class="grid_30 omega">
					<ul id="top-menu">
						<li>
						<a href="#">Visita también <span class="red_arrow">&#32;</span></a>
							<ul>
								<li>
									<div class="cont">
										<img class="arrow" alt="cream arrow" src="img/cream_arrow.png">
										<ol>
											<li>
												<a target="_blank" href="http://www.scotiabank.com.pe/">Sitio oficial de Scotiabank</a>
											</li>
											<li>
												<a target="_blank" href="http://www.scotiapuntos.com.pe/">Scotiapuntos</a>
											</li>
											<li>
												<a target="_blank" href="http://www.scotiabank.com.pe/clubsueldo/">Clubsueldo</a>
											</li>
											<li>
												<a target="_blank" href="http://www.scotiabank.com.pe/tarjetas/">Tarjetas</a>
											</li>
										</ol>
									</div>
								</li>
							</ul>

						</li>
						<li>
							|
						</li>

						<li>
							<a href="#" target="_blank">Preguntas y respuestas</a>							
						</li>
                        <li>
							|
						</li>

						<li>
							<a href="#" target="_blank">Contáctenos</a>							
						</li>
					</ul>

				</div>

			</div>
            
            <div id="menu_tarjetas" class="grid_50">
            	<div class="sombra">
                	&#32;
                </div>
                <div class="tarjeta alpha">
                	<a href="#"><img src="photos/tarjeta_debito.png" alt="Tarjeta de débito"></a>
                    <div class="cont">						
                        <img class="arrow" alt="arrow" src="img/cream_arrow.png">
                        <h3>Tarjeta de débito</h3>
					</div>
                </div>
                <div class="tarjeta">
                	<a href="#" onclick="mostrar(0)"><img src="photos/tarjeta_visa.png" alt="Tarjetas Visa"></a>
                    <div class="cont">						
                        <img class="arrow" alt="arrow" src="img/cream_arrow.png">
                        <h3>Tarjetas Visa</h3>
						<ol>
							<li>
								<a href="#" onclick="mostrar(0)">Clásica</a>
							</li>
							<li>
								<a href="#" onclick="mostrar(1)">Oro</a>
							</li>
							<li>
								<a href="#" onclick="mostrar(2)">Platinum</a>
							</li>
							<li>
								<a href="#" onclick="mostrar(3)">Signature</a>
							</li>
						</ol>
					</div>
                </div>
                <div class="tarjeta">
                	<a href="#"><img src="photos/tarjeta_mastercard.png" alt="Tarjetas Mastercard"></a>
                    <div class="cont">						
                        <img class="arrow" alt="arrow" src="img/cream_arrow.png">
                        <h3>Tarjetas Mastercard</h3>
						<ol>
							<li>
								<a href="#">Clásica</a>
							</li>
							<li>
								<a href="#">Oro</a>
							</li>
							<li>
								<a href="#">Platinum</a>
							</li>
							<li>
								<a href="#">Black</a>
							</li>
						</ol>
					</div>
                </div>
                <div class="tarjeta">
                	<a href="#"><img src="photos/tarjeta_jockey.png" alt="Tarjeta Jockey"></a>
                    <div class="cont">						
                        <img class="arrow" alt="arrow" src="img/cream_arrow.png">
                        <h3>Tarjeta Jockey</h3>
					</div>
                </div>
                <div class="tarjeta omega">
                	<a href="#"><img src="photos/tarjeta_empresarial.png" alt="Tarjetas Empresariales"></a>
                    <div class="cont">						
                        <img class="arrow" alt="arrow" src="img/cream_arrow.png">
                        <h3>Tarjetas Empresariales</h3>
						<ol>
							<li>
								<a href="#">Business Mastercard</a>
							</li>
							<li>
								<a href="#">Corporate Visa</a>
							</li>
						</ol>
					</div>
                </div>
            </div>
            
            <div class="spacer-10">
            	&#32;
            </div>
            
            <div id="contenido" class="grid_50">
                <div class="grid_11 alpha">
                    <div id="anuncio" class="f-left">
                    	<p>
                        	Tus <strong>tarjetas<br>Scotiabank,</strong> ahora<br>más cerca a ti
                        </p>
                        <span style="font-size:13px;"><a href="#">ver más &gt;&gt;</a></span>
                    </div>
                    <div class="grid_11 alpha">
                    	<div class="cuadro">
                        	<div id="slider2">
                                <!-- "previous slide" button -->
                                <a class="backward">prev</a>
        
                                <!-- container for the slides -->
                                <div class="images">
        
                                    <!-- first slide -->
                                    <div>
                                        <h4>Ofertón</h4>
                                        
                                        <p>
                                        	Membresía de 3 meses<br> 16, 200 Puntos<br>
                                            ------------------- ó -------------------<br>
                                            6, 600 Puntos + S/. 350 Tarjeta
                                        </p>
                                        <img src="img/logo_oferta_1.png" alt="logo_oferta_1">
                                        <img src="img/logo_scotiapuntos.png" class="logo" alt="Scotiapuntos">
                                    </div>
        
                                    <!-- second slide -->
                                    <div>
                                        <h4>Ofertón</h4>
                                        
                                        <p>
                                        	TV LED 32"<br> 33, 000 Puntos<br>
                                            ------------------- ó -------------------<br>
                                            13, 150 Puntos + S/. 660 Tarjeta
                                        </p>
                                        <img src="img/logo_oferta_2.png" alt="logo_oferta_2">
                                        <img src="img/logo_scotiapuntos.png" class="logo" alt="Scotiapuntos">
                                    </div>
        
                                </div>
        
                                <!-- "next slide" button -->
                                <a class="forward">next</a>
        
                                <!-- the tabs -->
                                <div class="slidetabs1">
                                    <a href="#">1</a>
                                    <a href="#">2</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="grid_30">
                    <div id="slider" class="grid_30 alpha">
                        <!-- "previous slide" button -->
                        <a class="backward">prev</a>
    
                        <!-- container for the slides -->
                        <div class="images">
    
                            <!-- first slide -->
                            <div>    
                                <img width="590" height="236" src="photos/photo1.png" alt="foto1">    
                            </div>
    
                            <!-- second slide -->
                            <div>
                                <img width="590" height="236" src="photos/photo2.png" alt="foto2">
                            </div>
    
                        </div>
    
                        <!-- "next slide" button -->
                        <a class="forward">next</a>
    
                        <!-- the tabs -->
                        <div class="slidetabs">
                            <a href="#">1</a>
                            <a href="#">2</a>
                        </div>
                    </div>
                    <div class="grid_10 alpha">
                    	<div class="cuadro">
                            <img src="img/cuadro_mirate.png" alt="Mírate">
                            <p>
                                Fotos de<br> nuestros<br> eventos
                            </p>
                           	<a href="mirate.html">ver más &gt;&gt;</a>
                            <img src="img/cuadro_mirate_fondo.png" alt="Mírate" style="position:absolute; top:5px; right:0; margin:0;">
                        </div>
                    </div>
                    <div class="grid_10">
                    	<div class="cuadro">
                            <img src="img/cuadro_promociones.png" alt="Promociones">
                            <p>
                                Visita nuestro calendario de promociones
                            </p>
                            <a href="promociones.html">ver más &gt;&gt;</a>
                            <img src="img/cuadro_promociones_fondo.png" alt="Promociones" style="position:absolute; bottom:8px; right:12px; margin:0;">
                        </div>
                    </div>
                    <div class="grid_10 omega">                    	
                        <div class="cuadro">
                        	<img src="img/cuadro_aprende.png" alt="Aprende">
                            <p>
                                Entiende cómo funciona tu tarjeta y estado de cuenta
                            </p>
                           	<a href="aprende.html">ver más &gt;&gt;</a>                            
                            <img src="img/cuadro_aprende_fondo.png" alt="Aprende" style="position:absolute; bottom:0; right:0; margin:0;">
                        </div>
                    </div>
                </div>
                
                <div id="cuponera" class="grid_9 omega">
                    <a href="cuponera.html"><img src="img/cuponera.png" alt="Cuponera"></a>
                </div>
            </div>
            
            <div class="spacer-10">
				&#32;
			</div>

			<div id="footer" class="grid_50">

				<ul id="bottom-menu">
					<li>
						<a href="javascript:abreventana('http://www.scotiabank.com.pe/acercade/terminos_condiciones.shtml','term','width=636,height=400,scrollbars=yes,top=100,left=125');">Términos y Condiciones</a>
					</li>
					<li>
						|
					</li>
					<li>
						<a href="javascript:abreventana('http://www.scotiabank.com.pe/popup_sbs.html','tarif','width=510,height=450,scrollbars=no,top=100,left=125');">SBS Ley de Transparencia</a>
					</li>
					<li>
						<a target="_blank" href="http://www.sbs.gob.pe/0/modulos/JER/JER_Interna.aspx?ARE=0&amp;PFL=1&amp;JER=892">( Reglamento</a>
					</li>
					<li>
						/
					</li>
					<li>
						<a target="_blank" href="http://www.sbs.gob.pe/0/modulos/JER/JER_Interna.aspx?ARE=0&amp;PFL=0&amp;JER=154">Tasas )</a>
					</li>
					<li>
						|
					</li>
					<li>
						<a target="_blank" href="http://www.dcf.com.pe/">Defensoría del Cliente</a>
					</li>
					<li>
						|
					</li>
					<li>
						<a target="_blank" href="http://www.ocn.gob.pe/">OCN Perú</a>
					</li>
				</ul>
				<div class="clear"></div>
				<p style="text-align: right; font-size: 12px;">
					Para cualquier duda o consulta, comunícate con Banca Telefónica al 311-6000 
				</p>
				

			</div>
        </div>
        
        <div id="parallax_tarjetas">
        	&#32;
        </div>
    </body>
</html>
